import React, { useContext } from 'react';
import classNames from 'classnames';
import { Row, Col } from 'antd';
import SuperSearchContext from './context';
// const More = ({ children }) => {
//     const searchContext = useContext(SuperSearchContext);

//     return (
//         <div className={classNames('search-more', { 'search-more--collapsed': searchContext.collapsed })}>
//             {children}
//         </div>
//     );
// };
/**
 * 默认的搜索表单配置
 */
const defaultColConfig = {
    xxl: 6,
    xl: 8,
    lg: 12,
    md: 24,
    sm: 24,
    xs: 24
};

const More = props => {
    const searchContext = useContext(SuperSearchContext);
    const { children, colConfig } = props;
    const finalColConfig = colConfig ? { ...defaultColConfig, ...colConfig } : { ...defaultColConfig };

    const childrenArr = React.Children.map(children, (item, index) => ({ ...item, key: index }))?.filter(item =>
        React.isValidElement(item)
    );

    const getChildren = () =>
        childrenArr?.map(item => (
            <Col {...finalColConfig} key={item.key}>
                {item}
            </Col>
        ));

    return (
        <div className={classNames('search-more', { 'search-more--collapsed': searchContext.collapsed })}>
            <Row type="flex" span={24} gutter={16} style={{ alignItems: 'center' }} className="form-row">
                {getChildren()}
            </Row>
        </div>
    );
};

More.displayName = 'SuperSearch.More';

export default More;
